<template>
	<view>
		<view class="block_1">
			<view class="tt1">「稻浪同歌」2025年7月10日成立于西安</view>
			<view class="text_flex">
				<view class="items">
					<view class="t1">
						<text>{{ topData.day }}</text>
						天
					</view>
					<view class="">已成立</view>
				</view>
				<view class="items">
					<view class="t1">
						<text>{{ topData.countCity }}</text>
						座
					</view>
					<view class="">足迹分布</view>
				</view>
				<view class="items">
					<view class="t1">
						<text>{{ topData.countLineDown }}</text>
						场
					</view>
					<view class="">线下活动</view>
				</view>
				<view class="items">
					<view class="t1">
						<text>{{ topData.countLineUp }}</text>
						场
					</view>
					<view class="">线上活动</view>
				</view>
			</view>
		</view>
		<view class="search_flex flex_jc_sb">
			<view class="flex">
				<view v-for="(item, index) in data.typyList" :key="index" class="btn" :class="data.active == item.name ? 'active' : ''" @click="changBtn(item)">
					{{ item.name }}
				</view>
			</view>
			<view v-if="data.active == '线下'" class="search flex" @click="$pageGo('/pages/index/search')">
				<image src="/static/search_b.png" mode=""></image>
				输入城市名称搜索
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<!-- 线下活动 - 保持原样 -->
			<view class="list" v-if="data.active == '线下'">
				<view class="item" v-for="(item, index) in data.list" :key="index" @click="$pageGo(`/pages/index/citycommunity?city=${item.name}`)">
					<view class="imgflex flex_jc_cent">
						<image src="/static/lf.png" mode=""></image>
						<text>{{ item.name }}</text>
						<image src="/static/rf.png" mode=""></image>
					</view>
					<view class="hq flex_jc_cent">
						<image src="/static/q.png" mode="aspectFill"></image>
						历史线下活动-{{ item.count }}场
					</view>
					<view class="imgs">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<!-- 线上活动 - 使用处理后的数据 -->
			<view class="" v-if="data.active == '线上'">
				<view class="" v-if="onlineList.length > 0">
					<view class="list2" v-for="(monthItem, monthIndex) in onlineList" :key="monthIndex">
						<view class="title">{{ monthItem.yearMonth }}</view>
						<view class="item2" v-for="(dayItem, dayIndex) in monthItem.days" :key="dayIndex">
							<view class="times">
								{{ dayItem.dayWeek }}
							</view>
							<view class="ttt" v-for="(activity, activityIndex) in dayItem.activities" :key="activityIndex">
								<text v-if="activity.beginTime">{{ $formatTime(activity.beginTime, 'hours-minutes') }}</text>
								{{ activity.name }}
							</view>
						</view>
					</view>
				</view>
				<view v-else-if="data.list.length > 0 && onlineList.length === 0">
					<view class="empty">数据格式异常</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { homeHistoryData, getHistoryList } from '@/api/index.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm } from '@/utils/common.js';

const data = reactive({
	typyList: [
		{
			name: '线下',
			url: '/mini/page/home/history/line/down/list'
		},
		{
			name: '线上',
			url: '/mini/page/home/history/line/up/list'
		}
	],
	active: '线下',
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		url: '/mini/page/home/history/line/down/list',
		pageNum: 1,
		pageSize: 10
	}
});

// 计算属性：专门处理线上活动的复杂数据结构
const onlineList = computed(() => {
	if (data.active !== '线上' || !data.list || data.list.length === 0) {
		return [];
	}
	try {
		const result = [];
		// 遍历原始数据，data.list 格式: [{ "2025-11": { "11-21 周五": [...] } }]
		data.list.forEach(item => {
			// item 格式: { "2025-11": { "11-21 周五": [...] } }
			Object.keys(item).forEach(yearMonth => {
				const monthData = item[yearMonth];
				const monthItem = {
					yearMonth: yearMonth,
					days: []
				};
				
				// 处理每一天的数据
				Object.keys(monthData).forEach(dayWeek => {
					const activities = monthData[dayWeek];
					if (Array.isArray(activities)) {
						monthItem.days.push({
							dayWeek: dayWeek,
							activities: activities.map(activity => ({
								id: activity.id,
								name: activity.name,
								beginTime: activity.beginTime,
								type: activity.type,
								// 只取需要的字段，减少数据量
							}))
						});
					}
				});
				
				if (monthItem.days.length > 0) {
					result.push(monthItem);
				}
			});
		});
		
		return result;
	} catch (error) {
		console.error('处理线上数据出错:', error);
		return [];
	}
});

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};

// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	if (isLoadMore) {
		await delay(500);
	}
	
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.data);
		} else {
			data.list = res.data || [];
		}
		
		// 判断是否有更多数据
		data.hasMore = res.data && res.data.length >= data.queryParams.pageSize;
		
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};

// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	
	try {
		data.isLoading = true;
		
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少500ms，避免闪烁
			await delay(500);
		}
		
		const res = await getHistoryList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		
		if (!success) {
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		console.error('请求失败:', err);
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

const changBtn = (i) => {
	data.active = i.name;
	data.queryParams.url = i.url;
	data.queryParams.pageNum = 1; 
	data.list = []; // 清空旧数据
	getList();
};

const topData = reactive({});

onLoad(() => {
	homeHistoryData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(topData, res.data);
		}
	});
	getList();
});
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.block_1 {
	width: 710rpx;
	height: 160rpx;
	background: #f5f5f0;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #b19561;
	padding: 10rpx 0rpx;
	box-sizing: border-box;
	.tt1 {
		text-align: center;
	}
	.text_flex {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		.items {
			width: 25%;
			text-align: center;
			.t1 {
				margin-top: 5rpx;
				text {
					font-family: 'DIN-BOLD';
					font-weight: 500;
					font-size: 32rpx;
					color: #b19561;
				}
			}
		}
	}
}
.search_flex {
	width: 710rpx;
	height: 52rpx;
	margin: 0rpx auto;
	.search {
		width: 300rpx;
		height: 52rpx;
		background: #efeeea;
		border-radius: 112rpx 112rpx 112rpx 112rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
	}
	.btn {
		width: 124rpx;
		height: 52rpx;
		background: #efeeea;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		line-height: 52rpx;
		text-align: center;
		margin-right: 40rpx;
	}
	.active {
		background: #b19561;
		color: #ffffff;
	}
}
.list2 {
	width: 710rpx;
	margin: 20rpx auto;
	border-radius: 20rpx;
	background: #fff;
	padding: 20rpx;
	box-sizing: border-box;
	.item2 {
		margin: 20rpx auto;
	}
	.title {
		font-family: 'DIN-BOLD';
		font-weight: bold;
		font-size: 40rpx;
		color: #75613e;
	}
	.times {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
		text {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 32rpx;
			color: #75613e;
		}
	}
	.ttt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #535251;
		margin: 20rpx auto;
		text {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 24rpx;
			color: #535251;
		}
	}
}
.list {
	.item {
		margin: 30rpx auto;
	}
	.imgflex {
		image {
			width: 60rpx;
			height: 60rpx;
		}
		text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			margin: 0 30rpx;
		}
	}
	.hq {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		width: 440rpx;
		height: 48rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 24rpx auto;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
	.imgs {
		width: 710rpx;
		height: 380rpx;
		border-radius: 20rpx;
		margin: 0rpx auto;
		image {
			width: 710rpx;
			height: 380rpx;
			border-radius: 20rpx;
		}
	}
}
</style>
